<template>
  <div class="page-header">
    <van-nav-bar :title="title" :left-text="leftText" :left-arrow="showBackArrow" :border="showBorder" :fixed="fixed"
      :placeholder="fixed" :safe-area-inset-top="safeAreaInsetTop" @click-left="onClickLeft">
      <template #left v-if="$slots.left">
        <slot name="left"></slot>
      </template>

      <template #title v-if="$slots.title">
        <slot name="title"></slot>
      </template>

      <template #right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

// 定义组件属性
const props = withDefaults(defineProps<{
  title?: string
  leftText?: string
  showBackArrow?: boolean
  showBorder?: boolean
  fixed?: boolean
  safeAreaInsetTop?: boolean
}>(), {
  title: '',
  leftText: '',
  showBackArrow: true,
  showBorder: true,
  fixed: true,
  safeAreaInsetTop: true
})

const router = useRouter()

// 左侧按钮点击事件处理
const onClickLeft = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.page-header {
  :deep(.van-nav-bar) {
    background-color: #fff;

    .van-nav-bar__title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .van-icon,
    .van-nav-bar__text {
      color: #333;
    }
  }
}
</style>